<template>
    <div>
        <Card class="card">
            <p slot="title">个人行为统计</p>
            <RadioGroup slot="extra" type="button">
                <Radio label="W">周</Radio>
                <Radio label="M">月</Radio>
                <Radio label="Y">年</Radio>
            </RadioGroup>

            <Table stripe :loading="loading" :columns="columns1" :data="data1" style="width:100%;" @on-sort-change="sort"></Table>
            <Page show-total show-sizer :total=total :current="currentPage" :page-size="pageSize" @on-page-size-change="getListByPageSize" @on-change="getListByPageNum" />
        </Card>
    </div>
</template>
<script>
    import axios from '@/libs/api.request'
    export default {
        data() {
            return {
                loading: false,

                // 总条数
                total: 0,
                // 当前页
                currentPage: 1,
                // 每页条数
                pageSize: 10,

                columns1: [{
                        title: '排名',
                        align: 'center',
                        key: 'username'
                    },
                    {
                        title: '头像',
                        align: 'center',
                        width: 80,
                        render: (h, params) => {
                            return h('img', {
                                style: {
                                    width: '50px',
                                    height: '50px',
                                    display: 'block'
                                },
                                attrs: {
                                    'src': params.row.request_url,
                                    'alt': 'log'
                                }
                            })
                        }
                    },
                    {
                        title: '姓名',
                        align: 'center',
                        key: 'params'
                    },
                    {
                        title: '积分',
                        align: 'center',
                        key: 'jf',
                        sortable: 'custom',
                    },
                    {
                        title: '上榜次数',
                        align: 'center',
                        sortable: 'custom',
                        key: 'ip'
                    },
                    {
                        title: '完成次数',
                        align: 'center',
                        sortable: 'custom',
                        key: 'ip'
                    },
                    {
                        title: '巡店有人次数',
                        align: 'center',
                        sortable: 'custom',
                        key: 'ip'
                    },
                    {
                        title: '二次销售次数',
                        align: 'center',
                        sortable: 'custom',
                        key: 'ip'
                    },
                    {
                        title: '期次回款次数',
                        align: 'center',
                        sortable: 'custom',
                        key: 'ip'
                    },
                    {
                        title: '合同续签次数',
                        align: 'center',
                        sortable: 'custom',
                        key: 'ip'
                    },
                ],
                data1: [{
                    username: '测',
                    jf: 1,
                    request_url: 'https://mdxundian.oss-cn-zhangjiakou.aliyuncs.com/static/logo.png'
                }, ],
            }
        },
        methods: {

            sort(e) {

                console.log(e.key);
                console.log(e.order);

            },

            getListByPageSize(pageSize) {
                this.pageSize = pageSize
                this.getList()
            },

            getListByPageNum(page) {
                this.currentPage = page
                this.getList()
            }
        }
    }
</script>
<style lang="less" scoped>

</style>